import { FC } from 'react';
import cs from 'classnames';
import { TableActionProps } from './interface';
import { ConfirmAction, ClickAction } from './components';

export const TableActions: FC<TableActionProps> = ({ className, actions, style }) => {
  const buttonItems = actions.map((item) => {
    const { text, key = text } = item;
    let child: JSX.Element;

    if ('confirm' in item) {
      const config = { ...item, key };
      child = <ConfirmAction {...config} />;
    } else {
      const config = { ...item, key };
      child = <ClickAction {...config} />;
    }

    return child;
  });

  return (
    <div className={cs('flex items-center', className)} style={style}>
      {buttonItems}
    </div>
  );
};
